
<template>
    <div class="m50">
        <el-table
            border
            style="margin-top: 50px; width: 1600px; overflow: scroll"
            :data="transData"
        >
            <el-table-column
                v-for="(item, index) in originData.length"
                :label="item"
                :key="index"
                :fixed="index === 0"
                align="center"
                width="300"
            >
                <template slot-scope="scope">
                    {{ scope.row[index] }}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: 'analyzeTable',
    props: {
        dataReportInfoYear: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    data() {
        return {
            // originData 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据
            // 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
            originData: [
                {
                    date: '7-01',
                    num: '12',
                    datecomp: '7-08',
                    numcomp: '12',
                },
                {
                    date: '7-02',
                    num: '13',
                    datecomp: '7-09',
                    numcomp: '4',
                },
                {
                    date: '7-03',
                    num: '23',
                    datecomp: '7-10',
                    numcomp: '12',
                },
                {
                    date: '7-04',
                    num: '13',
                    datecomp: '7-11',
                    numcomp: '4',
                },
                {
                    date: '7-05',
                    num: '23',
                    datecomp: '7-12',
                    numcomp: '12',
                },
                {
                    date: '7-06',
                    num: '13',
                    datecomp: '7-13',
                    numcomp: '4',
                },
                {
                    date: '7-07',
                    num: '23',
                    datecomp: '7-14',
                    numcomp: '12',
                },
            ],
            originTitle: ['日期', '指标', '对比日期', '对比指标'], // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
            transTitle: ['', '', '', ''], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可
            transData: [],
        }
    },
    computed: {},
    created() {
        // 数组按矩阵思路, 变成转置矩阵
        let matrixData = this.originData.map((row) => {
            let arr = []
            for (let key in row) {
                arr.push(row[key])
            }
            return arr
        })
        console.log(matrixData)
        // 加入标题拼接最终的数据
        this.transData = matrixData[0].map((col, i) => {
            return [
                this.originTitle[i],
                ...matrixData.map((row) => {
                    return row[i]
                }),
            ]
        })
        console.log(this.transData)
    },
    mounted() {},
    methods: {},
}
</script>
<style lang="scss" scoped>
.m50 {
    margin: 50px;
}
</style>